<script lang="ts" setup>
import { defineProps, defineEmits, ref, reactive } from 'vue'
import * as Cesium from 'cesium'
import { LayerModel, MapTypeModel } from '../../types'

interface ModelPickerPropTpe {
    mapType: MapTypeModel
    mapModel: Cesium.SceneMode
    layerModel: LayerModel
}

interface LayerListItemType {
    name: string
    layerType: LayerModel,
    mapType: MapTypeModel
}

const props = defineProps<ModelPickerPropTpe>()

const layerList = reactive<LayerListItemType[]>([
    {
        name: '天地图矢量',
        layerType: LayerModel.VEC_BASIC_LAYER,
        mapType: MapTypeModel.MAP_WORLD
    },
    {
        name: '天地图影像',
        layerType: LayerModel.IMG_BASIC_LAYER,
        mapType: MapTypeModel.MAP_WORLD
    },
    {
        name: '高德矢量',
        layerType: LayerModel.VEC_BASIC_LAYER,
        mapType: MapTypeModel.GAO_DE
    },
    {
        name: '高德影像',
        layerType: LayerModel.IMG_BASIC_LAYER,
        mapType: MapTypeModel.GAO_DE
    }
])
//图层切换按钮索引
const layerActive = ref<string>(`${props.mapType}-${props.layerModel}`)

const emit = defineEmits(['handleMapModel', 'handleLayerModel'])

//切换2d/3d
const changeMapModel = () => {
    if(props.mapModel === Cesium.SceneMode.SCENE2D) {
        emit('handleMapModel', Cesium.SceneMode.SCENE3D)
    } else {
        emit('handleMapModel', Cesium.SceneMode.SCENE2D)
    }
}

//切换矢量/影像
const changeLayerModel = (item: LayerListItemType) => {
    emit('handleLayerModel', item.layerType, item.mapType)
    layerActive.value = `${item.mapType}-${item.layerType}`
}
//加载本地图片
const getImgUrl = (url: string) => {
    return new URL(url, import.meta.url).href
}
</script>

<template>
    <div class="pick">
        <div class="layer-group">
            <div class="layer" v-for="item in layerList" :key="item.name" :class="[layerActive === `${item.mapType}-${item.layerType}` ? 'active' : '']" 
            :style="{
                backgroundImage: `url(${getImgUrl(`../../../../assets/map-icon-${item.layerType === LayerModel.VEC_BASIC_LAYER ? '1' : '2'}.jpg`)})`,
            }" 
            @click="changeLayerModel(item)">
                <span>{{ item.name }}</span>
            </div>   
        </div>
        <div class="scene" @click="changeMapModel" :style="{
            borderRadius: props.mapModel === Cesium.SceneMode.SCENE2D ? '4px' : '50%'
        }">
            <span>{{ props.mapModel === Cesium.SceneMode.SCENE2D ? '2d' : '3d' }}</span>
        </div>  
    </div>
</template>

<style lang="css" scoped>
.pick {
    position: absolute;
    bottom: 5px;
    right: 5px;
    /* width: 300px; */
    /* height: 60px; */
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.pick .scene {
    width: 60px;
    height: 60px;
    background-color: #4b5ce3;
    /* border-radius: 50%; */
    margin-right: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 700;
    transition: all .3s;
    cursor: pointer;
    color: #fff;
    transition: all .3s;
}


.pick .layer-group {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    margin-right: 20px;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 4px;
}

.layer-group .layer {
    width: 100px;
    height: 60px;
    /* margin-right: 10px;
    margin-left: 10px; */
    margin: 10px;
    border-radius: 4px;
    border: 3px solid #fff;
    box-sizing: border-box;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    font-size: 14px;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    padding-right: 5px;
    padding-bottom: 5px;
}

.layer.active {
    border-color: #4b5ce3;
}

</style>